<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>

	</head>
	<body>

		<header>
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user ">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart ">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>

			<!-- LOGO图区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">

				<div class=" " style="background-color: rgba(0,0,0,0.8);">

					<div class="container py-4">

						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">

							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>

							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;">
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i
										 class="fa fa-search text-white"></i></button>

								</form>
							</li>
						</ul>

					</div>


				</div>

			</div>

			<!-- 中部分栏部分 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="#" class="nav-link defoult ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>

			<!-- 头部区域的轮播图区域 -->
			<div class="row m-0">
				<div class="col-12 p-0 m-0">
					<div class="carousel " data-ride="carousel" id="Carousel">

						<ol class="carousel-indicators m-0 p-0 w-100">
							<li data-target="#Carousel" data-slide-to="0" class="active"></li>
							<li data-target="#Carousel" data-slide-to="1" class=""></li>
							<li data-target="#Carousel" data-slide-to="2" class=""></li>
						</ol>

						<ul class="carousel-inner m-0 p-0">

							<li class="carousel-item active"><img src="images/gallery4.jpg" class="d-block w-100" height="450"></li>
							<li class="carousel-item"><img src="images/gallery_big5.jpg" class="d-block w-100" height="450"></li>
							<li class="carousel-item"><img src="images/gallery_big6.jpg" class="d-block w-100" height="450"></li>
						</ul>


						<a class="carousel-control-prev m-0 p-0 " href="#Carousel" data-slide="prev">
							<span class="carousel-control-prev-icon"></span>
						</a>
						<a class="carousel-control-next" href="#Carousel" data-slide="next">
							<span class="carousel-control-next-icon"></span>
						</a>

					</div>
				</div>
			</div>
		</header>



		<main>
			<!-- 中部的介绍区域 -->
			<div class="container" style="">
				<ul class="row mt-5 list-unstyled">
					<li class="col-md-6 col-12 overflow-hidden p-0">
						<img src="images/about.jpg" class="w-100 nav_da" height="">
					</li>
					<li class="col-md-6 col-12 text-md-left text-sm-center mt-sm-4 ">
						<p class="font-weight-bold" style="font-size: 30px; color:  #E4606D;">Welcome <i class="" style="font-size: 30px; color: black;">To
								Hand Made</i></p>

						<p class="" style="font-size: 14px; color: gray;">It is a long established fact that a reader will be distracted
							by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
							more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look
							like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
							default model text, and a search for 'lorem ipsum' will uncover
						</p>

						<span style="font-size: 16px; color: gray;">Lorem Ipsum as their default model text, and a search for 'lorem
							ipsum' will uncover many web sites still in their infancy.</span>

						<div class="d-flex justify-content-md-start justify-content-center ">
							<a href="#" class="btn_jie text-center " style=" ">READ MORE</a>
						</div>
							


					</li>
				</ul>
			</div>

			<!-- 中部的商品介绍中心区域 -->
			<div class="" style="background-image: url(images/patterns/pattern-3.jpg);">
				
				<div class="" style="background-color: rgba(0,0,0,0.8);">
				
					<p class="font-weight-bold py-5" style="font-size: 30px; margin: 0 auto;  color:  #E4606D; width: 300px;">Our<span
						 class="" style="font-size: 30px; color: white;">New Arrivals</span></p>
				
					<div class="container ">
						<ul class="row m-0 pl-0">
				
							<!-- 一 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
								<img src="./images/new_pro1.jpg" class="w-100 ">
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Jellied Eels.</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
							</li>
				
				
							<!-- 二 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
				
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Deep Fried Pomfret.</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
								<img src="./images/new_pro2.jpg" class="w-100">
				
							</li>
				
							<!-- 三 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
								<img src="./images/new_pro3.jpg" class="w-100">
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Marinated Swordfish</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
							</li>
				
							<!-- 四 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
								<img src="./images/new_pro4.jpg" class="w-100">
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Jellied</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
							</li>
				
							<!-- 五 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
				
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Salmon</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
								<img src="./images/new_pro5.jpg" class="w-100">
				
							</li>
				
				
							<!-- 六 -->
							<li class="col-lg-4 col-md-6 col-12 py-3 nav_li">
				
								<img src="./images/new_pro6.jpg" class="w-100">
				
								<div class="bg-white py-3 " style="padding-left: 20px; padding-right: 20px;">
									<i class="font-weight-bold " style="font-size: 24px;">Salmon Roe.</i>
				
									<p style="font-size: 16px; " class="text-muted">orem Ipsum has been the industry's standard dummy text ever
										since the
										1500s</p>
				
									<div class="d-flex">
										<span class="font-weight-bold" style="font-size: 18px; color:  #E4606D;">$12 Only</span>
				
				
										<a href="#" class="btn_n text-center ml-auto ">
											<i class="fa fa-cart-plus btn_gou"></i>
										</a>
				
									</div>
								</div>
				
							</li>
						</ul>
					</div>
				
				</div>
				
			</div>
			


			<!-- 中部选项卡部分 -->
			<div class="" style="background-image: url(./images/choose_bg.jpg); background-repeat: repeat;">

				<div class="container">

					<ul class="row m-0 ">


						<li class="col-lg-5 col-md-12   py-5">



						</li>


						<li class="col-lg-7 col-md-12 justify-content-center    py-5">

							<p class="font-weight-bold" style="font-size: 25px; color:  #E4606D;">Why<i class="font-weight-bold" style="font-size: ; color: black;">Choose
									Us</i></p>

							<div id="example">

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left  btn-link" data-toggle="collapse" data-target="#menu1">
											Respecting Your Time<span class="add"></span>
										</button>
									</div>

									<div class="card-body yy collapse show" data-parent="#example" id="menu1">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu2">
											Latest In Technology<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy" data-parent="#example" id="menu2">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu3">
											Professional Staff<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu3">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu4">

											Free Home Dilevery<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu4">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu5">

											High Quality<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu5">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

							</div>

							<script type="text/javascript">
								$(function() {

									$('.collapse').on('hidden.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'add');

									})


									$('.collapse').on('shown.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'out');

									})


								})
							</script>


						</li>


					</ul>

				</div>


			</div>

			<!-- 中部四大美女部分 -->
			<div class="container mt-5">

				<span class="font-weight-bold text-center d-block text-center mb-4" style="color: deeppink; font-size: 30px;">Our<i
					 class="" style="color: black;">Expert Artists</i></span>


				<ul class="row pl-0">

					<li class="col-lg-6 col-md-12   ">

						<ul class="row mt-4 si_mei pl-0">
							<li class="col-5   p-0 ">
								<img src="images/artist1.jpg" class="w-100 tu_h">
							</li>

							<li class="col-7 py-3  ">
								<p class="font-weight-bold " style="font-size: 21px; color: white; margin: 0px;">Melisa bush</p>
								<p class="" style="font-size: 15px; color: white; margin: 0px;">Chief Advisior</p>

								<span style="color: white;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et
									luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</span>
								<i class="fa fa-facebook text-white d-block mt-3">
									<i class="fa fa-twitter ml-2"></i>
									<i class="fa fa-google-plus ml-3"></i>
									<i class="fa fa-linkedin"></i>
								</i>

							</li>
						</ul>

					</li>

					<li class="col-lg-6 col-md-12 ">


						<ul class="row mt-4 si_mei ml-0 pl-0">
							<li class="col-5  p-0">
								<img src="images/artist2.jpg" class="w-100 tu_h">
							</li>

							<li class="col-7 py-3  ">
								<p class="font-weight-bold " style="font-size: 21px; color: white; margin: 0px;">Martina Carlo</p>
								<p class="" style="font-size: 15px; color: white; margin: 0px;">Chief Advisior</p>

								<span style="color: white;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et
									luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</span>
								<i class="fa fa-facebook text-white d-block mt-3">
									<i class="fa fa-twitter ml-2"></i>
									<i class="fa fa-google-plus ml-3"></i>
									<i class="fa fa-linkedin"></i>
								</i>

							</li>
						</ul>


					</li>

					<li class="col-lg-6 col-md-12   ">

						<ul class="row mt-4 si_mei pl-0">


							<li class="col-7 py-3  ">
								<p class="font-weight-bold " style="font-size: 21px; color: white; margin: 0px;">Melisa bush</p>
								<p class="" style="font-size: 15px; color: white; margin: 0px;">Chief Advisior</p>

								<span style="color: white;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et
									luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</span>
								<i class="fa fa-facebook text-white d-block mt-3">
									<i class="fa fa-twitter ml-2"></i>
									<i class="fa fa-google-plus ml-3"></i>
									<i class="fa fa-linkedin"></i>
								</i>

							</li>

							<li class="col-5   p-0 ">
								<img src="images/artist3.jpg" class="w-100 tu_h">
							</li>

						</ul>

					</li>

					<li class="col-lg-6 col-md-12 ">


						<ul class="row mt-4 si_mei ml-0 pl-0">


							<li class="col-7 py-3  ">
								<p class="font-weight-bold " style="font-size: 21px; color: white; margin: 0px;">Martina Carlo</p>
								<p class="" style="font-size: 15px; color: white; margin: 0px;">Chief Advisior</p>

								<span style="color: white;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et
									luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</span>
								<i class="fa fa-facebook text-white d-block mt-3">
									<i class="fa fa-twitter ml-2"></i>
									<i class="fa fa-google-plus ml-3"></i>
									<i class="fa fa-linkedin"></i>
								</i>

							</li>

							<li class="col-5  p-0">
								<img src="images/artist4.jpg" class="w-100 tu_h">
							</li>

						</ul>
					</li>
				</ul>

			</div>


			<!-- 中部区域的三个帅哥的区域  -->
			<div class="row w-100 m-0 " style="background-image: url(images/customer_bg.jpg); background-size: cover;">

				<div class="col-12  py-5 " style="background-color: rgba(0,0,0,0.8); ">

					<span class="font-weight-bold text-center d-block text-center mb-4" style="color:  #E4606D; font-size: 30px;">Our<i
						 class="" style="color: white;">Happy Customers</i></span>

					<div class="container">

						<ul class="row pl-0">

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer1.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer2.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>

							<li class="col-md-4 col-12   py-5 text-center">
								<a href="#"><img src="images/customer3.png" class=""></a>

								<span class="font-weight-bold mb-2 text-center d-block text-center " style="color:  #E4606D; font-size: 20px; ">Hilpton
									Broad</span>

								<p class="text-white" style="">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
									in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.
								</p>

							</li>
						</ul>

					</div>

				</div>
			</div>

			<!-- 中部最后一个商品的区域 -->
			<div class="row m-0" style="background-color: white;">
				<div class="col-12 p-0 mt-4">
					<span class="font-weight-bold text-center d-block text-center mb-4" style="color: deeppink; font-size: 30px;">Our<i
						 class="" style="color: black;"> Latest Blog</i></span>
				</div>

				<div class="container">

					<ul class="row pl-0">
						<li class="col-md-4  col-12 mt-3 pl-0 nav_li">

							<img src="images/new_pro1.jpg" class="w-100">
							<div class="" style="padding-left: 6px; padding-right: 6px;">

								<p class="font-weight-bold" style="font-size: 24px;">Inteligent Transitions In Design</p>
								<i class="fa fa-user " style="color: deeppink;">
									<i style="color: black;">Admin</i>
									<i class="fa fa-calendar " style="color: deeppink;">
										<i style="color: black;">12 June 2018</i>
										<i class="fa fa-tags " style="color: deeppink;"><i style="color: black;">Picture</i></i>
									</i>
								</i>

								<span class=" d-block mt-2" style="">Pleasure and praising pain was born and will give you a complete account
									of
									the systems, and expound the actual teaching.
								</span>

								<i class="font-weight-bold mt-2 d-block" style="font-size: 17px; color: deeppink;">READ MORE</i>

							</div>


						</li>

						<li class="col-md-8 col-12 p-0 mt-3 " style="background-image: url(images/blog_big.jpg);  ">

							<div class="h-100  " style="padding-top: 45px; padding-left: 45px; background-color: rgba(0,0,0,0.8); ">

								<p class="text-white d-block">13 June 2018</p>

								<i class="font-weight-bold d-block" style="font-size: 23px; color: white;">Standard Blog Post</i>

								<p class="text-white" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
									<br> incididunt ut labore et do lore magna aliqua.Lonsectetur adipiscing elit, sed do <br> eiusmod tempor
									incididunt ut labore et dolore</p>
								<span class="font-weight-bold" style="font-size: 20px; color: white;">Posted By<i style="color: deeppink;">Willam
										Harry</i></span>

							</div>


						</li>

						<!-- 三 -->
						<li class="col-md-4 col-12 py-3 pl-0 nav_li ">

							<img src="images/new_pro2.jpg" class="w-100">

							<div class="" style="padding-left: 20px; padding-right: 20px;">

								<p class="font-weight-bold" style="font-size: 24px;">DIY Matisse</p>
								<i class="fa fa-user " style="color: deeppink;">
									<i style="color: black;">Admin</i>
									<i class="fa fa-calendar " style="color: deeppink;">
										<i style="color: black;">12 June 2018</i>
										<i class="fa fa-tags " style="color: deeppink;"><i style="color: black;">Picture</i></i>
									</i>
								</i>

								<span class=" d-block mt-2" style="">Pleasure and praising pain was born and will give you a complete account
									of
									the systems, and expound the actual teaching.
								</span>

								<i class="font-weight-bold mt-2 d-block" style="font-size: 17px; color: deeppink;">READ MORE</i>

							</div>


						</li>

						<!-- 四 -->
						<li class="col-md-4 col-12  py-3 pl-0 nav_li">

							<img src="images/new_pro3.jpg" class="w-100">

							<div class="" style="padding-left: 15px; padding-right: 15px;">

								<p class="font-weight-bold" style="font-size: 24px;">Creating Art Spances For Kids</p>
								<i class="fa fa-user " style="color: deeppink;">
									<i style="color: black;">Admin</i>
									<i class="fa fa-calendar " style="color: deeppink;">
										<i style="color: black;">12 June 2018</i>
										<i class="fa fa-tags " style="color: deeppink;"><i style="color: black;">Picture</i></i>
									</i>
								</i>

								<span class=" d-block mt-2" style="">Pleasure and praising pain was born and will give you a complete account
									of
									the systems, and expound the actual teaching.
								</span>

								<i class="font-weight-bold mt-2 d-block" style="font-size: 17px; color: deeppink;">READ MORE</i>

							</div>



						</li>
						<!-- 五 -->
						<li class="col-md-4 col-12 py-3 pl-0 pr-0 nav_li">

							<img src="images/new_pro4.jpg" class="w-100" style="height: 299.98px;">

							<div class="" style="padding-left: 15px;">

								<p class="font-weight-bold" style="font-size: 24px;">Illuminated Accessories</p>
								<i class="fa fa-user " style="color: deeppink;">
									<i style="color: black;">Admin</i>
									<i class="fa fa-calendar " style="color: deeppink;">
										<i style="color: black;">12 June 2018</i>
										<i class="fa fa-tags " style="color: deeppink;"><i style="color: black;">Picture</i></i>
									</i>
								</i>

								<span class=" d-block mt-2" style="">Pleasure and praising pain was born and will give you a complete account
									of
									the systems, and expound the actual teaching.
								</span>

								<i class="font-weight-bold mt-2 d-block" style="font-size: 17px; color: deeppink;">READ MORE</i>

							</div>



						</li>
					</ul>

				</div>

			</div>
		</main>

		<!-- 底部区域 -->
		<footer>

			<!-- 中底部的五个导航栏区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row d-flex justify-content-center justify-content-sm-center text-center m-0 pl-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部黑色部分的区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部介绍区域的部分 -->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a> by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
